<template>
<div class="body" ref="scrollBody" @scroll="debouncedScroll">
	<div style="height: 66px"></div>
	<div class="container">
		<div class="search">
			<el-input placeholder="请输入内容" v-model="query.search" class="input-with-select" @keyup.enter="search">
				<template #append>
					<el-button icon="el-icon-search" @click="search"></el-button>
				</template>
			</el-input>
		</div>
		<div class="condition">
			<div class="orientation">
				<div class="title">方向</div>
				<div :class="{active:query.oriented === ''}" @click="changeOriented('')">全部</div>
				<div v-for="(item,index) in orientedList" :class="{active:query.oriented === item.id}" :key="index" @click="changeOriented(item.id)">{{item.oriented_name}}</div>
			</div>
			<div class="cate">
				<div class="title">分类</div>
				<div :class="{active:query.cate_id === ''}" @click="changeCate('')">全部</div>
				<div v-for="(item,index) in cateList" :class="{active:query.cate_id === item.id}" :key="index" @click="changeCate(item.id)">{{item.cate_name}}</div>
			</div>
		</div>
		<div class="articlelist">
			<div class="article-box" v-for="(item,index) in articleList" :key="index" @click="toNewPage('/codedetail',{article_id:item.id})">
				<div class="article-item">
					<div class="cover" :style="'background-image: url(\''+ config.imgPath + item.pic + '?x-oss-process=image/resize,w_500,limit_0' +'\')'"></div>
					<div class="detail">
						<div class="title">{{item.title}}</div>
						<div class="desc">{{item.desc}}</div>
						<div class="bottom">
							<span class="date"><i class="iconfont history">&#xe622;</i> {{methods.formatDate(item.create_time,'yyyy-MM-dd hh:mm')}}</span>
							<span class="author">发布: 绯村剑心</span>
						</div>
					</div>
				</div>
				<div class="divider-line"></div>
			</div>
			<div class="page">
				<el-pagination  v-model:currentPage="query.pageIndex" :total="query.count" :page-size="query.pageSize" hide-on-single-page background layout="prev, pager, next, jumper" @current-change="handleChangePage"> </el-pagination>
			</div>
		</div>

	</div>
</div>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({name:'codelist'})
</script>
<script setup>
import {ElInput, ElButton,ElPagination, ElMessage} from "element-plus"
import {useStore} from "vuex";
import {onActivated, onUnmounted, reactive, ref} from "vue";
import request from "../utils/request";
import _ from "lodash";
import router from "../router";
import Methods from "../utils/Methods";
const store = useStore()
store.commit("setHeaderTab",2)

const scrollBody = ref(null)
let scrollTop = 0
const debouncedScroll = _.debounce(() => {
	scrollTop = scrollBody.value.scrollTop
},300)

const query = reactive({
	search: '',
	oriented: '',
	cate_id: '',
	pageIndex: 1,
	pageSize: 10,
	count: 0
})


const articleList = ref([])
const orientedList = ref([])
const cateList = ref([])
const search = () => {
	query.search = query.search.trim()
	getData()
}
const toNewPage = (path,query) => {
	let routeData = router.resolve({
		query: query,
		path:path
	});
	window.open(routeData.href, '_blank');
}

const getData = () => {
	request.post('/blog/code/articleList',Methods.obj2Form(query)).then(res => {
		articleList.value = res.data.list
		query.count = res.data.count
	}).catch(err => {
	    console.log(err)
	})
}
const getCondition = () => {
	request.post('/blog/code/conditionList',{}).then(res => {
		orientedList.value = res.data.oriented
		cateList.value = res.data.cate_list
	}).catch(err => {
	    console.log(err)
	})
}
const handleChangePage = (page) => {
	query.pageIndex = page
	getData()
}
const changeOriented = (oriented_id) => {
	query.oriented = oriented_id
	getData()
}
const changeCate = (cate_id) => {
	query.cate_id = cate_id
	getData()
}
getData()
getCondition()
onActivated(() => {
	scrollBody.value.scrollTop = scrollTop
	store.commit("setHeaderTab",2)
})
onUnmounted(() => {
	// console.log('onUnmounted code')
})

</script>

<style scoped lang="scss">
@import "../assets/aliiconfont/iconfont.css";
.search {
	width: 80%;
	max-width: 500px;
	margin: 150px auto 15px;
}
.condition {
	width: 100%;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0 3px 7px 0 rgb(255 255 255 / 35%);
	box-sizing: border-box;
	padding: 15px;
	.cate,.orientation {
		display: flex;
		flex-wrap: wrap;
		div {
			margin: 5px;
			padding: 5px 15px;
			border-radius: 3px;
			cursor: pointer;
		}
		.title {
			cursor: auto;
			font-weight: bold;
		}
		.active {
			background-color: rgba(242,13,13,.06);
			color: #f70000;
		}

	}

}
.articlelist {
	width: 100%;
	background-color: rgba(255,255,255,0.75);
	box-shadow: 0 3px 7px 0 rgb(255 255 255 / 35%);
	padding: 15px;
	.article-box {
		width: 100%;
	}
	.article-item {
		display: flex;
		padding: 10px 0;
		cursor: pointer;
		.cover {
			width: 180px;
			height: 120px;
			border-radius: 3px;
			background-position: center center;
			background-size: cover;
		}
		.detail {
			flex: 1;
			margin-left: 15px;
			display: flex;
			text-align: left;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 16px;
			}
			.desc {
				padding-left: 32px;
				font-size: 14px;
			}
			.bottom {
				.date {
					margin-right: 15px;
				}
				.author {

				}
			}
		}
	}
	.divider-line {
		width: 100%;
		height: 0;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.page {
		margin: 15px 0;
		text-align: center;
		::v-deep(.el-pagination button .el-icon) {
			margin: 0 auto;
		}
	}
}
</style>
